基本概念

主軸和交叉軸

Flexbox 容器有兩個重要的軸，即主軸和交叉軸。主軸是 Flexbox 排列元素的主要方向，而交叉軸是與主軸垂直的方向。

• 主軸對齊（Main Axis）：用於定義彈性盒子在主軸上的對齊方式。
• 交叉軸對齊（Cross Axis）：用於定義彈性盒子在交叉軸上的對齊方式。
• 主軸的開始和結束：主軸有一個開始（Start）和一個結束（End）點，它們決定了元素的排列方向。

容器和彈性盒子

• 容器（Container）：包含一組彈性盒子的父元素，我們可以在容器上設置 Flexbox 屬性。
• 子元素（Items）：容器中的每個元素都是子元素，它們受到容器的排列方式的影響。

Flexbox 屬性

1. display: flex;：將一個元素設置為 Flexbox 容器。
2. flex-direction：定義主軸的方向，可以是row（水平方向）、column（垂直方向）、row-reverse（反轉水平方向）或column-reverse（反轉垂直方向）。
3. justify-content：控制彈性盒子在主軸上的對齊方式，例如flex-start、center、flex-end等。
4. align-items：控制彈性盒子在交叉軸上的對齊方式，例如flex-start、center、flex-end等。
5. flex-wrap：指定是否允許彈性盒子在同一行或同一列上換行，可以是nowrap、wrap或wrap-reverse。
6. flex-grow：定義彈性盒子在可用空間中的增長比例。
7. flex-shrink：定義彈性盒子在可用空間不足時的收縮比例。
8. flex-basis：設置彈性盒子在主軸上的初始尺寸。

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>


<style>
.container {
  display: flex; // 將容器設置為 Flexbox 佈局
  justify-content: space-between; //主軸對齊方式為兩端對齊
  align-items: center; // 交叉軸對齊方式為居中對齊
}
.item {
  flex: 1; // 讓子元素平均分佈主軸空間
}
</style>

參考資料與閱讀更多

CSS-Tricks - A Complete Guide to Flexbox
MDN Web Docs: Flexbox